<template>
  <view class="match-animation" v-show="visible">
    <view class="animation-mask"></view>
    <view class="animation-container">
      <!-- 外圈旋转动画 -->
      <view class="outer-ring"></view>
      <!-- 内圈旋转动画 -->
      <view class="inner-ring"></view>
      <!-- 中心匹配动画 -->
      <view class="center-circle">
        <view class="matching-text">匹配中</view>
        <view class="dots">
          <view class="dot"></view>
          <view class="dot"></view>
          <view class="dot"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MatchAnimation',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
.match-animation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;

  .animation-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .animation-container {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;

    .outer-ring {
      position: absolute;
      width: 180px;
      height: 180px;
      border: 4px solid transparent;
      border-top-color: #3c96f3;
      border-radius: 50%;
      animation: rotate 2s linear infinite;
      box-sizing: border-box;
      filter: drop-shadow(0 0 5px rgba(60, 150, 243, 0.5));
    }

    .inner-ring {
      position: absolute;
      width: 140px;
      height: 140px;
      border: 4px solid transparent;
      border-bottom-color: #ff7043;
      border-radius: 50%;
      animation: rotate 1.5s linear infinite reverse;
      box-sizing: border-box;
      filter: drop-shadow(0 0 5px rgba(255, 112, 67, 0.5));
    }

    .center-circle {
      width: 100px;
      height: 100px;
      background-color: rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      box-shadow: 0 0 20px rgba(60, 150, 243, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);

      .matching-text {
        color: #ffffff;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 8px;
        text-shadow: 0 0 10px rgba(60, 150, 243, 0.5);
      }

      .dots {
        display: flex;
        gap: 4px;

        .dot {
          width: 8px;
          height: 8px;
          background-color: #ffffff;
          border-radius: 50%;
          animation: dotPulse 1.4s infinite;
          box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);

          &:nth-child(2) {
            animation-delay: 0.2s;
          }

          &:nth-child(3) {
            animation-delay: 0.4s;
          }
        }
      }
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dotPulse {
  0%, 100% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}
</style> 